<template>
    <div style="width: 100%; height: 100%; background-color: #bbb; text-align:center;">

        <div style="width: 300px; background-color: white;
            padding: 20px 20px 30px 20px; display: inline-block; margin-top: 50px;">
            <div style="text-align: left; margin-bottom: 20px;">登录</div>

            <el-form :model="formData" :rules="formRules" ref="formRef">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formData.username" placeholder="请输入用户名"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password" type="password"
                        placeholder="请输入密码"/>
                </el-form-item>
                <el-form-item style="text-align: right; margin-bottom: 0;">
                    <el-button type="text">忘记密码</el-button>
                    <el-button type="primary" @click="submit"
                        :loading="loading">登录</el-button>
                </el-form-item>
            </el-form>

        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                formData: {
                    username: '',
                    password: ''
                },
                formRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur'},
                        { min: 3, max: 10, message: '请输入正确的用户名', trigger: 'blur'},
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur'},
                        { min: 6, message: '请输入正确的密码', trigger: 'blur'},
                    ]
                }
            }
        },
        methods: {
            submit() {
                this.$refs['formRef'].validate(valid=> {
                    if(!valid) { return; }
                    let formData = this.formData;

                    let params = {
                        username: formData.username,
                        password: formData.password,
                    }

                    this.loading = true;
                    this.$postAction(this.$apiUrl.login, params)
                    .then(res=> {
                        return new Promise((resolve, reject)=> {
                            this.loading = false;
                            if(!res || !res.code) { reject('响应错误'); return; }
                            if(res.code != '20000') { reject(res.message?res.message:'响应错误'); return; }
                            
                            let data = res.data;
                            sessionStorage.setItem('token', data);
                            this.$router.push({name: 'Home'});
                            resolve();
                        })
                    }).catch(error=> { this.$message.error(typeof(str)=='string'?error:'响应错误'); this.loading = false; });
                });
            },
        }
    }
</script>